<template>
	<view class="container">
		<!-- 返回按钮 -->
		<!-- <view class="nav" @tap="toHome()">
			<image :src="$xyfun.image('/static/arrow-left.png')"></image>
		</view> -->

		<!-- 门图标 -->
		<image class="door-icon"
			:src="$xyfun.image(isDoorOpen ? '/static/store/door.png' : '/static/store/door.png')">
		</image>

		<!-- 房间选择器 -->
		<view class="room-list">
			<view class="room-selector">
				<!-- 使用 picker 组件来实现下拉选择房间 -->
				<picker v-model="room_id" :range="roomNames" @change="onRoomChange">
					<view class="picker">
						<!-- 显示选择的房间名称 -->
						<text>{{ selectedRoomName }}</text>
						<image class="arrow-down" :src="$xyfun.image('/static/store/arrow.png')"></image>
					</view>
				</picker>
			</view>
		</view>

		<!-- 门状态控制 -->
		<view @click="toggleDoor">
			<image :src="$xyfun.image(isDoorOpen ? '/static/store/switch-on.png' : '/static/store/switch-off.png')"
				class="switch-icon">
			</image>
			<view class="open-door-btn">{{ isDoorOpen ? '关门' : '开门' }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDoorOpen: false, // 默认关门状态
				room_id: 1, // 默认房间 ID
				rooms: [], // 存储房间列表
				roomNames: [], // 存储房间名称列表
				selectedRoomName: '', // 当前选择的房间名称
			};
		},
		onLoad() {
			this.getDoorStatus(); // 页面加载时获取门的状态
			this.loadRoom(); // 加载房间列表
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
		},
		methods: {
			// 跳转到主页
			toHome() {
				uni.switchTab({
					url: "/pages/index"
				});
			},
			// 获取当前场馆所有房间的数据列表
			loadRoom() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.$api.post({
						url: '/Venue/Listvenue',
						loadingTip: '加载中...',
						data: {
							store_id: store_id
						},
						success: res => {
							this.rooms = res.rooms; // 更新 rooms 数据
							// 更新 roomNames 和 selectedRoomName
							this.roomNames = this.rooms.map(room => room.name);
							if (this.rooms.length > 0) {
								this.room_id = this.rooms[0].id; // 设置默认选择的房间 ID
								this.selectedRoomName = this.rooms[0].name; // 设置默认房间名称
							}
						},
					});
				});
			},
			// 处理房间选择变化
			onRoomChange(e) {
				const selectedIndex = e.detail.value;
				this.room_id = this.rooms[selectedIndex].id;
				this.selectedRoomName = this.rooms[selectedIndex].name;
				// 切换房间后，重新获取门的状态
				this.getDoorStatus();
			},
			// 获取门的状态
			getDoorStatus() {
				this.$api.get({
					url: '/common/getDoorStatus',
					data: {
						room_id: this.room_id
					},
					success: res => {
						// 使用 if 判断赋值
						console.log("res.switch:" + res.switch);
						if (res.switch === 'on') {
							this.isDoorOpen = true;
						} else if (res.switch === 'off') {
							this.isDoorOpen = false;
						} else {
							console.warn('门状态未知:', res.switch); // 提示异常值
							this.isDoorOpen = false; // 默认值
						}
						console.log("isDoorOpen:" + this.isDoorOpen);
					},
					fail: () => {
						uni.showToast({
							title: '获取门状态失败',
							icon: 'none'
						});
					}
				});
			},
			// 切换门的状态
			toggleDoor() {
				const newState = !this.isDoorOpen; // 切换状态
				this.$api.post({
					url: '/common/ctrlRoom',
					loadingTip: '加载中...',
					data: {
						room_id: this.room_id,
						switch: newState ? 'on' : 'off' // 接口需要 'on' 或 'off'
					},
					success: res => {
						this.isDoorOpen = newState; // 根据操作成功后更新状态
						uni.showToast({
							title: '操作成功'
						});
					},
					fail: () => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #000;
		color: #fff;
	}

	.door-icon {
		width: 291rpx;
		height: 291rpx;
	}

	.switch-icon {
		width: 237rpx;
		height: 237rpx;
	}

	.room-list {
		width: 100%;
	}

	.room-selector {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 60%;
		padding: 10px;
		background-color: #4CAF50;
		border-radius: 42rpx;
		margin: 20px auto;
		/* 自动居中 */
		margin-bottom: 40px;
		margin-top: 89rpx;
		text-align: center;
		position: relative;
	}

	.picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.arrow-down {
		width: 48rpx;
		height: 31rpx;
		position: absolute;
		right: 10px;
	}

	.open-door-btn {
		width: 80%;
		padding: 15px;
		font-size: 24px;
		cursor: pointer;
		color: #fff;
		text-align: center;
	}

	.nav {
		position: absolute;
		top: 20px;
		left: 10px;

		image {
			width: 25px;
			height: 25px;
		}
	}
</style>